Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[atable] Loading Options #226

Merged
merged 9 commits into from
Jan 24, 2025
Merged

[atable] Loading Options #226

merged 9 commits into from
Jan 24, 2025

Conversation

crabinak
Copy link
Collaborator

@agritheory Here are two options for the ATable loading we discussed utilizing a background gradient animation. I have one using the gradient and another using a bar that moves across the bottom. This is a Loading component that could be used in place of the ATable before the data loads. We can explore other options as well.

Setting this as a draft until we settle on a loading option as I have two similar components in there and unused ones would need to be cleaned up before merging.

Copy link
Contributor

github-actions bot commented Jan 3, 2025

Coverage Report for ./atable

Status Category Percentage Covered / Total
🔴 Lines 66.8% (🎯 70%) 163 / 244
🔴 Statements 67.95% (🎯 70%) 176 / 259
🟢 Functions 80.39% (🎯 70%) 41 / 51
🔴 Branches 46.52% (🎯 70%) 87 / 187
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
atable/src/components/ATableLoading.vue 0% 100% 100% 0% 3
atable/src/components/ATableLoadingBar.vue 0% 100% 100% 0% 3
Unchanged Files
atable/src/utils.ts 100% 100% 100% 100%
atable/src/components/ACell.vue 90.38% 62.5% 100% 90.19% 101, 124-127, 157, 165-167
atable/src/components/AExpansionRow.vue 0% 0% 0% 0% 33-3
atable/src/components/ARow.vue 64.28% 56.25% 75% 58.33% 51-65, 17
atable/src/components/ATable.vue 55.55% 35.29% 81.81% 54.71% 107-111, 121-149, 163-164
atable/src/components/ATableHeader.vue 100% 57.14% 100% 100%
atable/src/components/ATableModal.vue 46.66% 20% 50% 42.85% 22-45, 49
atable/src/stores/table.ts 74% 50% 84.21% 73.91% 40-41, 54, 85-86, 108-112, 128, 135, 139-150, 177, 185-186, 192
Generated in workflow #570 for commit a8bfb6c by the Vitest Coverage Report Action

@Alchez Alchez changed the title ATable Loading Options [atable] Loading Options Jan 13, 2025
@Alchez Alchez linked an issue Jan 23, 2025 that may be closed by this pull request
@agritheory
Copy link
Owner

@crabinak Both of these look great. I added a timeout on an additional sample to see how it could render in the table. I've never used the suspense component before, but it feels like that might be better than v-show.

@agritheory agritheory marked this pull request as ready for review January 23, 2025 20:38
@agritheory agritheory requested a review from Alchez January 23, 2025 20:38
@Alchez
Copy link
Collaborator

Alchez commented Jan 24, 2025

I've never used the suspense component before, but it feels like that might be better than v-show.

@agritheory I've never used it before either, but it seems like it's meant for component trees that have multiple async components, and it allows managing loading states across all of them in a better way.

@Alchez Alchez merged commit 3310a48 into development Jan 24, 2025
5 of 6 checks passed
@Alchez Alchez deleted the feat-atable-loading-gradient branch January 24, 2025 05:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[ATable] Add loading skeleton and slot
3 participants